<template>
  <div :class="['info_tab_main', { mini: sizeMini }]">
    <div class="info_tab_box" v-show="!sizeMini">
      <el-tabs class="info_tab" v-model="activeInfo">
        <el-tab-pane label="季度总结" :name="item.name" v-for="item in tabsShowTypeData" :key="item.name">
          <span slot="label">
            <div class="peoHint">
              <span>{{ item.label }}</span>
            </div>
          </span>
        </el-tab-pane>
      </el-tabs>
      <el-scrollbar class="info_tab_cont">
        <!-- 历史评价 -->
        <div v-if="activeInfo === 'history' && showHistory">
          <div class="eva-info">
            <div class="li-box" v-if="getShowHis(0)">
              <div class="box-title">第一季度评价：</div>
              <div class="box-info">
                <div class="info-li">
                  <div class="post">
                    <span v-if="showModeHistory === 1">部门负责人：</span>
                    <span v-else>分管负责人：</span>
                  </div>
                  <div class="level" v-if="historyData.leaderRank1">{{ historyData.leaderRank1 | AssessRank }}</div>
                  <div class="level" v-else>暂无</div>
                </div>
                <div class="info-li">
                  <div class="post">
                    <span v-if="showModeHistory === 1">分管负责人：</span>
                    <span v-else>单位主要负责人：</span>
                  </div>
                  <div class="level" v-if="historyData.mainLeaderRank1">
                    {{ historyData.mainLeaderRank1 | AssessRank }}
                  </div>
                  <div class="level" v-else>暂无</div>
                </div>
              </div>
            </div>
            <div class="li-box" v-if="getShowHis(1)">
              <div class="box-title">第二季度评价：</div>
              <div class="box-info">
                <div class="info-li">
                  <div class="post">
                    <span v-if="showModeHistory === 1">部门负责人：</span>
                    <span v-else>分管负责人：</span>
                  </div>
                  <div class="level" v-if="historyData.leaderRank2">{{ historyData.leaderRank2 | AssessRank }}</div>
                  <div class="level" v-else>暂无</div>
                </div>
                <div class="info-li">
                  <div class="post">
                    <span v-if="showModeHistory === 1">分管负责人：</span>
                    <span v-else>单位主要负责人：</span>
                  </div>
                  <div class="level" v-if="historyData.mainLeaderRank2">
                    {{ historyData.mainLeaderRank2 | AssessRank }}
                  </div>
                  <div class="level" v-else>暂无</div>
                </div>
              </div>
            </div>
            <div class="li-box" v-if="getShowHis(2)">
              <div class="box-title">第三季度评价：</div>
              <div class="box-info">
                <div class="info-li">
                  <div class="post">
                    <span v-if="showModeHistory === 1">部门负责人：</span>
                    <span v-else>分管负责人：</span>
                  </div>
                  <div class="level" v-if="historyData.leaderRank3">{{ historyData.leaderRank3 | AssessRank }}</div>
                  <div class="level" v-else>暂无</div>
                </div>
                <div class="info-li">
                  <div class="post">
                    <span v-if="showModeHistory === 1">分管负责人：</span>
                    <span v-else>单位主要负责人：</span>
                  </div>
                  <div class="level" v-if="historyData.mainLeaderRank3">
                    {{ historyData.mainLeaderRank3 | AssessRank }}
                  </div>
                  <div class="level" v-else>暂无</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 季度总结 -->
        <QuarterlySummary v-if="activeInfo === 'quarter'" :activeUser="activeUser" :loading="loadingFlag" />
        <!-- 月度小结 -->
        <div v-if="activeInfo == '01-02'">
          <div v-if="yearsAssessList.length > 0">
            <div class="task_list" v-for="item in yearsAssessList" :key="item.id" @click="skipweekDetail(item)">
              <div :class="['list_status', { warning: item.saveStatus !== '1' }]">
                {{ item.saveStatus === '1' ? '已完成' : '未完成' }}
              </div>
              <div class="list_info">
                <div class="list_tiem">{{ item.title }}</div>
                <div class="list_text">{{ item.boundsRemark }}</div>
              </div>
            </div>
          </div>
          <Empty v-else>
            <slot>暂无数据</slot>
          </Empty>
        </div>
        <!-- 周纪实 -->
        <div v-if="activeInfo == '01-01'">
          <div v-if="weekList.length > 0">
            <div class="task_list" v-for="item in weekList" :key="item.id" @click="skipweekDetail(item)">
              <div :class="['list_status', { warning: item.saveStatus !== '1' }]">
                {{ item.saveStatus === '1' ? '已完成' : '未完成' }}
              </div>
              <div class="list_info">
                <div class="list_tiem">{{ item.title }}</div>
                <div class="list_text">{{ item.boundsRemark }}</div>
              </div>
            </div>
          </div>
          <Empty v-else>
            <slot>暂无数据</slot>
          </Empty>
        </div>

        <!-- 奖惩情况 -->
        <div v-if="activeInfo == 'award'">
          <Empty>
            <slot>暂无数据</slot>
          </Empty>
        </div>

        <!-- 岗位职责 -->
        <div v-if="activeInfo == 'week4'">
          <div class="board_list" v-if="activeUser.postDuty">
            <div class="board_list_title">岗位职责</div>
            <p v-html="removeHtmlStyle(activeUser.postDuty)" class="img_box"></p>
          </div>

          <Empty v-else>
            <slot>暂无数据</slot>
          </Empty>
        </div>
      </el-scrollbar>
    </div>
    <div :class="['put_away', sizeMini ? 'el-icon-arrow-left' : 'el-icon-arrow-right']" @click="sizeChange"></div>
  </div>
</template>

<script>
import {
  getScoreSideBarRecordForm,
  getScoreSideBarRecordFormNoLoading,
  getUserHistoryAssessData,
} from '@apis/evaluation.js'
import QuarterlySummary from './QuarterlySummary.vue'
import { cloneDeep } from 'lodash'

export default {
  name: 'RgightDetail',
  components: {
    QuarterlySummary,
  },
  props: {
    activeUser: {
      type: Object,
      default: () => {
        return {}
      },
    },
    requestType: {
      type: Number,
      default: 0,
    },
    quarterlyShow: {
      type: Boolean,
      default: false,
    },
    loadingFlag: {
      type: Boolean,
      default: false,
    },
    quarterNow: {
      type: Number,
      default: 0,
    },
    showHistory: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      sizeMini: false,
      activeInfo: 'taskfinsh',
      tabsTypeData: [
        {
          label: '季度总结',
          name: 'quarter',
        },
        {
          label: '月小结',
          name: '01-02',
        },
        {
          label: '周纪实',
          name: '01-01',
        },
        {
          label: '岗位职责',
          name: 'week4',
        },
      ],
      tabsShowTypeData: [],
      bussign: '',
      recordType: '',

      yearsAssessList: [],
      weekList: [],
      taskList: [], // 任务完成列表

      queryRouter: {},
      historyData: {},
      showModeHistory: 1,
    }
  },
  watch: {
    activeUser() {
      this.activeUserChange()
    },
    quarterlyShow(now) {
      this.tabsShowTypeData = cloneDeep(this.tabsTypeData)
      if (!now) {
        //  判断tabs显示类型---是否显示季度总结
        this.tabsShowTypeData = cloneDeep(this.tabsTypeData.slice(1))
      }
      if (this.quarterNow > 0 && this.showHistory) {
        // this.tabsShowTypeData.unshift({
        //   label: '历史评价',
        //   name: 'history',
        // })
        this.lookHistory()
      }
      this.activeInfo = this.tabsShowTypeData[0].name
    },
  },
  filters: {
    AssessRank(val) {
      switch (val) {
        case '1':
          return '好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'
        case '':
          return '-'
        default:
          break
      }
    },
  },
  created() {},
  mounted() {
    this.queryRouter = this.$route.query
    this.activeUserChange()
  },
  methods: {
    activeUserChange() {
      this.yearsAssessList = []
      this.weekList = []
      this.tabsShowTypeData = cloneDeep(this.tabsTypeData)
      if (this.queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS')) {
        // 主要领导评价
        if (![1, 2, 3].includes(this.activeUser.status)) {
          this.tabsShowTypeData = cloneDeep(this.tabsTypeData.slice(1))
        }
      } else {
        // 分管领导评价
        if (![2, 3].includes(this.activeUser.status)) {
          this.tabsShowTypeData = cloneDeep(this.tabsTypeData.slice(1))
        }
      }
      if (this.quarterNow > 0 && this.showHistory) {
        this.lookHistory()
      }
      this.activeInfo = this.tabsShowTypeData[0].name
      if (this.activeUser.status !== 0) {
        // 月小结
        this.getYearsLists('01-02')
        // 周纪实
        this.getYearsLists('01-01')
      }
    },
    // 大小切换方法
    sizeChange() {
      this.sizeMini = !this.sizeMini
    },

    // 获取周纪实月小结数据
    getYearsLists(recordType) {
      if (!this.loadingFlag) {
        getScoreSideBarRecordForm({
          needId: this.queryRouter.needId,
          userId: this.activeUser.userId,
          actType: recordType,
        }).then(res => {
          if (recordType === '01-01') {
            // 周纪实
            this.weekList = res.data
          } else if (recordType === '01-02') {
            // 月小结
            this.yearsAssessList = res.data
          }
        })
      } else {
        getScoreSideBarRecordFormNoLoading({
          needId: this.queryRouter.needId,
          userId: this.activeUser.userId,
          actType: recordType,
        }).then(res => {
          if (recordType === '01-01') {
            // 周纪实
            this.weekList = res.data
          } else if (recordType === '01-02') {
            // 月小结
            this.yearsAssessList = res.data
          }
        })
      }
    },
    // 查看周纪实详情
    skipweekDetail(item) {
      const url = this.getSearch(item.url.split('?')[1])
      if (item.saveStatus === '1') {
        this.$router.push({
          path: '/document/index-detail',
          query: {
            id: url.id,
            noteId: url.id,
            recordType: this.activeInfo,
            userId: this.activeUser.userId,
            orgId: this.activeUser.orgId,
          },
        })
      } else {
        this.$message.error({
          message: '纪实未完结',
        })
      }
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    // 查看历史评价
    lookHistory() {
      getUserHistoryAssessData({
        needId: this.queryRouter.needId,
        userId: this.activeUser.userId,
      }).then(res => {
        if (res.data.length) {
          this.showModeHistory = res.data[0].showMode
          this.historyData = res.data[0].userAssessDataResponseVOS[0]
          const { leaderRank1, leaderRank2, leaderRank3, mainLeaderRank1, mainLeaderRank2, mainLeaderRank3 } =
            this.historyData
          if (leaderRank1 || leaderRank2 || leaderRank3 || mainLeaderRank1 || mainLeaderRank2 || mainLeaderRank3) {
            this.tabsShowTypeData.unshift({
              label: '历史评价',
              name: 'history',
            })
            this.activeInfo = this.tabsShowTypeData[0].name
          }
        }
      })
    },
    // url 解析
    getSearch(str) {
      if (!str) {
        return
      }
      str = decodeURI(str) // 这个方法是给URL进行解析，解决中文乱码问题
      // str = str.slice(1)
      const obj = {}
      const arr = str.split('&')
      for (let i = 0; i < arr.length; i++) {
        arr[i] = arr[i].split('=')
        obj[arr[i][0]] = arr[i][1]
      }
      return obj
    },
    getShowHis(quarter) {
      const { leaderRank1, leaderRank2, leaderRank3, mainLeaderRank1, mainLeaderRank2, mainLeaderRank3 } =
        this.historyData
      if (quarter === 0) {
        if (leaderRank1 || mainLeaderRank1) {
          return true
        }
      } else if (quarter === 1) {
        if ((leaderRank1 || mainLeaderRank1 || leaderRank2 || mainLeaderRank2) && this.quarterNow > 1) {
          return true
        }
      } else if (quarter === 2) {
        if (
          (leaderRank1 || mainLeaderRank1 || leaderRank2 || mainLeaderRank2 || leaderRank3 || mainLeaderRank3) &&
          this.quarterNow > 2
        ) {
          return true
        }
      }
      return false
    },
  },
}
</script>

<style lang="scss" scoped>
.info_tab_main {
  height: 100%;
  font-size: 16px;
  position: relative;
  transition: width 0s;
  &.mini {
    width: 20px !important;
    .put_away {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
  }
  .info_tab_box {
    height: 100%;
    padding-top: 0;
    background-color: #e9eff48f;
    padding: 0;
    .info_tab {
      /deep/.el-tabs__item {
        height: 56px !important;
        line-height: 56px;
      }
      /deep/.el-tabs__nav-next,
      /deep/.el-tabs__nav-prev {
        line-height: 56px;
        background: #cecece;
        width: 30px;
        text-align: center;
        color: #fff;
      }
      /deep/.el-tabs__nav-wrap {
        padding: 0 38px;
      }
      .peoHint {
        font-size: 14px;
      }
    }
    .info_tab_cont {
      height: calc(100% - 100px);
      padding: 0 30px;
      width: 100%;
      overflow-x: hidden;
      .quater_one {
        margin-bottom: 20px;
      }
      .board_list {
        margin-top: 20px;
        .board_list_title {
          font-size: 16px;
          font-weight: bold;
          color: #333333;
          margin-bottom: 10px;
        }
        .img_box {
          padding: 15px;
          background-color: #e9eff48f;
          margin-bottom: 10px;
        }
        .board_list_sugge {
          color: #333333;
          font-size: 16px;
          line-height: 15px;
          padding: 10px 0;
          letter-spacing: 1px;
        }
        .img_box_suggest {
          padding: 10px;
          border: 1px solid #dddddd;
        }
        .board_list_suggest {
          padding: 15px;
          background-color: #e9eff48f;
          color: #333333;
          font-size: 16px;
          line-height: 26px;
          letter-spacing: 1px;
        }
        .file_box_suggest {
          margin-top: 10px;
        }
      }
      .task_list {
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 62px;
        border-bottom: 1px solid #eeeeee;
        padding-left: 10px;
        cursor: pointer;
        margin-top: 10px;
        .list_status {
          padding-right: 15px;
          color: #3a8c43;
          &.warning {
            color: #a40002;
          }
        }
        .list_info {
          display: flex;
          flex-direction: column;
          flex: 1;
          width: 0;
          border-left: 1px solid #eeeeee;
          padding-left: 15px;
          .list_tiem {
            font-size: 12px;
            color: #999999;
            margin-bottom: 3px;
          }
          .list_text {
            font-size: 14px;
            color: #333333;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
      .eva-info {
        .li-box {
          margin: 10px;
          .box-title {
            margin-top: 10px;
          }
          .box-info {
            border-bottom: 1px solid #cccccc;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            .info-li {
              display: flex;
              align-items: center;
              margin: 10px 0;
              .level {
                display: inline-block;
                border: 1px solid #cccccc;
                color: #f59a23;
                border-radius: 10px;
                width: 60px;
                height: 35px;
                text-align: center;
                line-height: 35px;
              }
            }
          }
        }
      }
    }
  }
  .info_tab_cont::-webkit-scrollbar {
    display: none;
  }
  /deep/.el-scrollbar__wrap::-webkit-scrollbar {
    display: none;
  }
  .el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
  }
  // 任务完成情况
  .taskfinsh_box {
    .taskfinsh_box_top {
      display: flex;
      justify-content: space-between;
      background: #fdeed7;
      line-height: 30px;
      padding: 0 5px;
      span {
        color: #666;
        display: inline-block;
        font-size: 16px;
        margin-left: 15px;
        height: 30px;
      }
    }
    .list_item {
      padding: 10px;
      border-bottom: 1px solid #efefef;
      .item_title {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        padding-bottom: 10px;
      }
      .item_info {
        display: flex;
        justify-content: space-between;
        .leader,
        .collaborator {
          font-size: 14px;
          color: #666666;
          .red {
            color: red;
          }
        }
      }
    }
  }

  // 收起图标
  .put_away {
    position: absolute;
    top: calc(50% - 100px);
    left: 0;
    height: 70px;
    width: 20px;
    border: 1px solid #53b0f8;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    color: #53b0f8;
    font-size: 20px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
  }
}
</style>
